<template>
    <div class="login-container">
        <van-nav-bar
          class="app-nav-bar"
          title="注册/登录"
          left-arrow
          @click-left="$router.back()"
        />

        <van-form 
        @submit="onLogin"
        @failed="onFailed" 
        :show-error="false" 
        :show-error-message="false"
        validate-first
        ref="login-form"
        >
          <van-field
            v-model="user.mobile"
            icon-prefix="font_family icon"
            left-icon="shouji"
            placeholder="请输入手机号"
            name="mobile"
            :rules="formRules.mobile"
          />
          <van-field
            v-model="user.code"
            clearable
            icon-prefix="font_family icon"
            left-icon="yanzhengma"
            placeholder="请输入验证码"
            name="code"
            :rules="formRules.code"
          >
          <template #button>
            <van-count-down 
            v-if="isCountDownShow"
            :time="1000*60"
            format="ss 秒" 
            @finish="isCountDownShow=false"
             />
            <van-button
             v-else
             class="send-btn" 
             size="small" 
             round
             :loading="isSendSmsLoading"
             @click.prevent="onSendSms"
             >发送验证码</van-button>
          </template>
          </van-field>
           <div class="login-btn-wrap">
              <van-button
               class="login-btn"
               type="primary"
               block
                >登录</van-button>
           </div>
        </van-form>
    </div>
</template>
<script>
import {login,sendSms} from '@/api/user'
// import { Toast } from 'vant';
export default {
    name:'LayoutIndex',
    data() {
       return {
         user: {
             mobile:'',
             code:''
         },
         formRules:{
           mobile:[
             {required: true, message: '请输入手机号'},
             {pattern:/^1[3|5|7|8|9]\d{9}$/,message:'手机号格式错误'}  
             ],
             code:[
             {required: true, message: '请输入验证码'},
             {pattern:/^\d{6}$/,message:'验证码格式错误'}  
             ]
         },
        //  控制倒计时和发送按钮的请求状态
         isCountDownShow:false,
        //  发送验证码按钮的loading状态
         isSendSmsLoading:false
       };
     },
     methods:{
       async onLogin(){
        //  组件内调用
        this.$toast.loading({
         message: '登录中...',
         forbidClick: true,
         duration:0
});
        //  1.找到数据接口
        // 2.封装请求方法
        // 3.请求调用登录
       try {
          const {data}=await login(this.user)
     
          this.$toast.success('登录成功');
          // 将后端返回的用户登录状态(token等数据)放到vuex容器中
          this.$store.commit('setUser',data.data)
          // 清除layout的缓存，让它重新渲染
          this.$store.commit('removeCachePage','LoginIndex')
          // 登录成功，跳转回原来的页面
          // this.$router.back()
          this.$router.push(this.$router.query.redirect||'/')
       } catch (error) {
         console.log('登录失败',error);
         this.$toast.fail('登录失败，手机或验证码错误');
       }
        // 4.处理响应结果
       },
       onFailed(error){
          if(error.errors[0]){
            this.$toast({
              message:error.errors[0].message,//提示消息
              position:'top'//防止手机键盘过高挡住提示
            })
          }
       },
      async onSendSms () {
  try {
    // 校验手机号码
    await this.$refs['login-form'].validate('mobile')
    // 验证通过，请求发送验证码
    this.isSendSmsLoading=true
    // 展示按钮的loading状态，防止网络慢用户多次点击触发发送行为
    this.isSendSmsLoading=true
    // 验证通过，请求发送验证码
    await sendSms(this.user.mobile)
    // 短信发出去后，隐藏发送按钮，显示倒计时
    this.isCountDownShow=true
  } catch (err) {
    // try 里面任何代码的错误都会进入 catch
    // 不同的错误需要有不同的提示，那就需要判断了
    let message = ''
    if (err && err.response && err.response.status === 429) {
      // 发送短信失败的错误提示
      message = '发送太频繁了，请稍后重试'
    } else if (err.name === 'mobile') {
      // 表单验证失败的错误提示
      message = err.message
    } else {
      // 未知错误
      message = '发送失败，请稍后重试'
    }

    // 提示用户
    this.$toast({
      message,
      position: 'top'
    })
  }
  // 无论发送验证码成功还是失败，最后都要关闭发送按钮的loading状态
  this.isSendSmsLoading=false
}
     }
}
</script>
<style scoped lang="less">
.login-container{
    .send-btn{
    height: 23px;
    background-color: #ededed;
    .van-button__text{
      font-size: 11px;
      color: #666666;
    }
  }
  .login-btn-wrap{
    padding: 26px 16px;
    .login-btn{
      background-color: #6db4fb;
      border: none;
      .van-button__text{
        font-size: 15px;
      }
    }
  }
}
</style>